<template>
  <div ref="container" class="render-container">
    <canvas class="render" ref="canvas"></canvas>
  </div>
</template>
<script lang="ts">
import { waterRender } from './WtarerRender';
import { SceneConfig } from '../../components/scenes/BaseScene';

export default {
  name: 'render',
  data() {
    return {
      ctx: null,
    };
  },
  mounted() {
    const { canvas, container } = this.$refs;
    const config: SceneConfig = {
      width: container.clientWidth,
      height: container.clientHeight,
      canvas: canvas,
    };
    this.ctx = waterRender(config);
    window.addEventListener('resize', this.reSize);
  },
  methods: {
    reSize() {
      const { container } = this.$refs;
      this.ctx.resetSize(container.clientWidth, container.clientHeight);
    },
  },
  unmounted() {
    window.removeEventListener('resize', this.reSize);
  },
};
</script>
<style lang="scss" scoped>
.render-container {
  position: relative;
}
</style>
